<template>
  <div class="demo">
    <div class="demo-title">自定义字段</div>
    <div class="demo-content">
      <Tree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        v-model:checkedKeys="checkedKeys"
        checkable
        :tree-data="treeData"
        :field-names="fieldNames"
      >
        <template #title="{ name, key }">
          <span v-if="key === '0-0-1'" style="color: #1890ff">{{ name }}</span>
          <template v-else>{{ name }}</template>
        </template>
      </Tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Tree from '@sscd/tree';
  import type { TreeProps } from '@sscd/tree';
  const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
  const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
  const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
  const fieldNames: TreeProps['fieldNames'] = {
    children: 'child',
    title: 'name',
  };
  const treeData: TreeProps['treeData'] = [
    {
      name: 'parent 1',
      key: '0-0',
      child: [
        {
          name: 'rsc',
          key: '0-0-0',
          disabled: true,
          child: [
            { name: 'leaf', key: '0-0-0-0', disableCheckbox: true },
            { name: 'leaf', key: '0-0-0-1' },
          ],
        },
        {
          name: 'parent 1-1',
          key: '0-0-1',
          child: [{ key: '0-0-1-0', name: 'ssc+' }],
        },
      ],
    },
  ];
  watch(expandedKeys, () => {
    console.log('expandedKeys', expandedKeys);
  });
  watch(selectedKeys, () => {
    console.log('selectedKeys', selectedKeys);
  });
  watch(checkedKeys, () => {
    console.log('checkedKeys', checkedKeys);
  });
</script>
